//-------------------------------------------------------------------------------------------------
// author zhangwei on 2015.08.10
// modified by zhangwei on 2015.08.10
// - Released ver 1.
//
// Reference
// - a simple guestbook single page app implemented using lumen and vue.js,
//   https://github.com/unnikked-ga/guestbook
//
// - A guestbook using Lumen and Vue.js, Posted by unnikked on 20 June 2015,
//   https://unnikked.ga/a-guestbook-using-lumen-and-vuejs
//
// - live Example,
//   http://guestbook.unnikked.ga/
//-------------------------------------------------------------------------------------------------

//-------------------------------------------------------------------------------------------------
// Definition of API
//
// To keep things simple the API comprehend only basic CRUD (not even all of them) operations.
//
//    GET /rest/comment to retrieve all comments posted
//    POST /rest/comment to create a new comment
//    DELETE /rest/comment/{id} to delete a specific comment id
//-------------------------------------------------------------------------------------------------

new Vue({

	// The el property needs to tell to Vue.js at which node of the DOM it has to "attach".
	el: '#guestbook',

	// The data property is the inner data structure that Vue.js keep synchronized with the DOM,
	// each key corresponds to a v-model binding.
  data: {
		comments: [],
    text: '',
    author: ''
  },

	// The ready property is used to define actions whenever a page is loaded, in this
	// case we will load all the comments from the backend.
    ready: function() {
		//this.getMessages();
      this.$http.get({url:'aa.json',method:'GET'}, function(data) {
          this.$set('json', data);
      }).error(function(data, status, request) {
        console.log('fail' + status + "," + request);
      })
    },
    find: function(inputQuery, pagenum, pagesteps, items, success_callback, error_callback){
        var url = "http://localhost:8080/rest/guestbook/messages/";
        Vue.http.get(url, function(data, status, request){

            success_callback(data, status, request);
        })
            .error(function (data, status, request) {
                alert("svc.find: fetch data from backend server failed! " + data + ' ' + status + ' ' + request);
                if (error_callback != null)
                {
                    error_callbac(data, status, request);
                }
            });
      this.getMessages();
    },
	// The methods property is used to define functions used by this "component"
	methods: {
    find: function(inputQuery, pagenum, pagesteps, items, success_callback, error_callback){
      var url = "http://localhost:8080/rest/guestbook/messages/";
      Vue.http.get(url, function(data, status, request){
        success_callback(data, status, request);
      })
      .error(function (data, status, request) {
        alert("svc.find: fetch data from backend server failed! " + data + ' ' + status + ' ' + request);
        if (error_callback != null)
        {
          error_callbac(data, status, request);
        }
      });
    },
		getMessages: function() {
			$.ajax({
				context: this,
				url: "/rest/guestbook/list",
                type:"GET",
                dataType:"json",
                success: function (result) {
                this.$set("comments", result)
                    if (success_callback != null)
                    {
                        success_callback(response, textStatus);
                    }
                    result = response;
                },
                error: function(data, status, request) {
                  alert("failed! " + data + '..' + status + '..' + request);
                  if (error_callback != null) {
                    error_callback(XMLHttpRequest, textStatus, errorThrown);
                  }
                  return null;
                }
            });
        },
				url: "http://localhost:8080/rest/guestbook/messages/",
        // type:"GET",
        // dataType:"json",
        success: function (result) {
          this.$set("comments", result)
        }
      })
      },

		onCreate: function(e) {
			e.preventDefault()
			$.ajax({
				context: this,
        type: "POST",
        data: {
					author: this.author,
                    text: this.text
                },
                url: "http://localhost:8080/rest/guestbook/list",
          text: this.text
        },
        url: "http://localhost:8080/rest/guestbook/messages/",
				success: function(result) {
					this.comments.push(result);
          this.author = ''
          this.text = ''
        }
      })
    },

    onDelete: function (comment) {
			$.ajax({
				context: comment,
                type: "DELETE",
                url: "http://localhost:8080/rest/guestbook/list" + comment.id
        });
            this.comments.$remove(comment);
        }
        type: "DELETE",
        url: "http://localhost:8080/rest/guestbook/messages/" + comment.id
      });
      this.comments.$remove(comment);
    }
  }
});

